{% extends "layout.html" %}
{% load static %}
{% block css_m %}

    <link rel="stylesheet" href="{% static '/css/datatables.bootstrap.min.css' %}" type="text/css"/>
    <style>
        td {
            text-align: center;
        }

        th {
            text-align: center;
        }
    </style>
{% endblock %}
{% block js_m %}
    <script type="text/javascript" src="{% static '/js/datatables.min.js' %}"></script>
{% endblock %}

{% block content_body %}
    <div class="page-jumbotron center-block" style="width: 1200px;margin-top:30px">
        <h1>客户列表 <a class="btn btn-primary" href="{% url 'customer_add' %}"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 添加客户</a></h1>


        <table class="table table-striped table-hover table-bordered tablesorter tablesorter-bootstrap"
               style="width: 1200px">
            <thead>
            <tr style="text-align: center">


                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>联系方式</th>

                <th>症状</th>
                <th>病史</th>
                <th>状态</th>

                <th>客户龄</th>
                <th>未进店天数</th>

                <th>未回访天数</th>
                <th>回访</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for each in customer_list %}
                <tr style="text-align: center">
                    <td>{{ each.pid }}</td>
                    <td><a href="/customer/{{ each.pid }}/details.html/">{{ each.name }}</a></td>
                    <td>{{ each.get_sex_display }}</td>
                    <td>{{ each.age }}岁</td>
                    <td>{{ each.phone }}</td>

                    <td>{{ each.symptom }}</td>
                    <td>{{ each.ill_date_period }}</td>
                    <td class="trail_or_bought">{{ each.get_trail_or_bought_display }}</td>
                    <td>{{ each.age_of_c }}天</td>
                    <td class="lst_indoor">{{ each.days_f_last_test_date }}天</td>

                    <td class="rv">{{ each.days_f_rv_date }}天</td>
                    <td><a href="/returning_visits/{{ each.pid }}/list.html/" class="btn btn-xs">回访</a></td>
                    <td><a href="/customer/{{ each.pid }}/edit.html/">修改</a></td>
                </tr>
            {% endfor %}

            </tbody>
        </table>


    </div>



{% endblock %}

{% block content_bottom %}
    <script type="text/javascript">
        jQuery.extend(jQuery.fn.dataTableExt.oSort, {
            "chinese-string-asc": function (s1, s2) {
                return s1.localeCompare(s2);
            },

            "chinese-string-desc": function (s1, s2) {
                return s2.localeCompare(s1);
            },
            "mixed-pre": function (a) {

                var x = String(a).match(/\d+/)[0];    //提取数字
                return parseFloat(x);
            },

            "mixed-asc": function (a, b) {                //正序排序引用方法
                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            },

            "mixed-desc": function (a, b) {                //倒序排序引用方法
                return ((a < b) ? 1 : ((a > b) ? -1 : 0));
            }
        })


        $(document).ready(function () {

            $("td").dblclick(function () {
                var pid = $($(this).parent('tr').children('td')[0]).text()
                window.location.replace("/customer/" + pid + "/details.html/")
            })


            $(".trail_or_bought").each(function (index, data) {
                if ($(data).text() === "已购买") {

                    $(this).addClass('text-warning');
                } else {
                    $(this).addClass('text-success');
                }
            })

            $(".lst_indoor").each(function (index, data) {
                if (parseInt($(data).text().slice(0, -1)) >= 3) {

                    $($(this).next().next().find('a')[0]).addClass('btn-warning');
                }else {
                    $($(this).next().next().find('a')[0]).addClass('btn-default');
                }
            })
            $(".rv").each(function (index, data) {
                if (parseInt($(data).text().slice(0, -1)) >= 3) {

                    $($(this).next().find('a')[0]).addClass('btn-danger');
                }else {
                    $($(this).next().find('a')[0]).addClass('btn-default');
                }
            })
            $("table").dataTable({
                aLengthMenu: [[10, 20, 50, -1], [10, 20, 50, "所有"]],//设置每页显示数据条数的下拉选项
                iDisplayLength: 20, //每页初始显示20条记录
                language: {
                    "decimal": "",//小数的小数位符号  比如“，”作为数字的小数位符号
                    "emptyTable": "无数据",//没有数据时要显示的字符串
                    "info": "当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条",//左下角的信息，变量可以自定义，到官网详细查看
                    "infoEmpty": "无记录",//当没有数据时，左下角的信息
                    "infoFiltered": "(从 _MAX_ 条记录过滤)",//当表格过滤的时候，将此字符串附加到主要信息
                    "infoPostFix": "",//在摘要信息后继续追加的字符串
                    "thousands": ",",//千分位分隔符
                    "lengthMenu": "每页 _MENU_ 条记录",//用来描述分页长度选项的字符串
                    "loadingRecords": "加载中...",//用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示
                    "processing": "处理中...",//用来描述加载进度的字符串
                    "search": "搜索",//用来描述搜索输入框的字符串
                    "zeroRecords": "无记录",//当没有搜索到结果时，显示
                    "paginate": {
                        "first": "首页",
                        "previous": "上一页",
                        "next": "下一页",
                        "last": "尾页"
                    }
                },
                columnDefs: [
                    {
                        //
                        "targets": [11],
                        "orderData": [11, 10, 9]
                    },
                    {
                        //
                        "targets": [12],
                        "orderable": false
                    },
                    {"type": 'chinese-string', "targets": [1, 5, 7,]},
                    {"type": 'mixed', "targets": [3, 6, 8, 9, 10]},

                ],


            });

        });

    </script>
{% endblock %}